import React, { Component } from 'react'
// 导入actions 
import { addCountAction, jianCountAction } from '../../store-react-redux/actions/carAction'
// 对比vue? 缺点:
// 缺点1: 还需要在使用store数据的页面中导入store. vuex 不需要, this.$store.state
// 或 computed:{...mapState(['count'])},没有实现全局化

// 缺点2: vuex 不需要重新订阅,只要store 中的数据变化,那么 页面中store中的数据也变化

// 基于如上两点: 引入react-redux
// 使用步骤:
// 第一步: 下载导入 react-redux
// 第二步:在项目的入口文件中,导入Provider组件,并提供store 数据给Provider组件 <Provider store={store}></Provider>
// 第三步: 在页面中使用react-redux, 按需导入一个高阶组件函数hoc叫做connect函数
// 第四步: 在当前页面组件中定义两个方法, mapStateToProps 和 mapDispatchToProps
// 第五步: 使用connect调用步骤4中的两个函数, 同时包裹当前组件,作用: 就是将store中的state
// 数据和 addCountFn 方法映射到当前组件实例的props 属性上, 这样就省去了 导入store 和 重新订阅的步骤 subscribe这一步了

import { connect } from 'react-redux';
class Father extends Component {
    render() {
        console.log('this', this);
        return (
            <div>
                <p>store中的count:{this.props.count}</p>
                <p>
                    <button onClick={() => this.props.addCountFn(1)}>同步count+1</button>
                    <button onClick={() => this.props.jianCountFn(2)}>同步count-2</button>
                </p>
            </div>
        )
    };
}

// mapStatetoProps
// 相当于vuex 中的mapState 将数据映射计算属性上
function mapStateToProps(state) {
    // state 就是当前store 仓库中国的state数据
    return state
}

//相当于vuex中 mapMutationS 将操作修改state 方法映射到methods中 
function mapDispatchToProps(dispatch) {
    return {
        addCountFn(payload) {
            dispatch(addCountAction(payload))
        },
        jianCountFn(payload) {
            dispatch(jianCountAction(payload))
        },

    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Father)

